<template>
  <div id="tjbb-khsl">
    <el-select
      style="width: 10vw"
      v-model="selectValueKHBH"
      placeholder="条件"
      @change="onSelectChange"
    >
      <el-option
        v-for="item in ['等级', '满意度', '信用度']"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>

    <div id="myChart" :style="{ width: '100%', height: '65vh' }"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValueKHBH: null,
      myChart: null,
    };
  },
  mounted: function () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById("myChart"));
    //this.initEcharts();
  },
  methods: {
    initEcharts(title, names, datas) {
      // 绘制图表
      this.myChart.setOption({
        title: { text: title },
        tooltip: {
          trigger: "item", //悬浮提示框不显示
        },
        grid: {
          //绘图区调整
          x: 150, //左留白
          y: 50, //上留白
          x2: 10, //右留白
          y2: 10, //下留白
        },
        legend: {},
        xAxis: [
          {
            // name: "金额",
            // nameLocation: "nameLocation",
            axisLabel: { formatter: "{value} 人" },
            //   nameGap: 30,
            nameTextStyle: {
              padding: [0, 0, 100, 0],
            },
            show: true,
            type: "value",
            boundaryGap: [0, 0],
            position: "top",
          },
        ],
        yAxis: [
          {
            show:false,
            type: "category",
            data: names, //["巴西", "印尼", "美国", "印度", "中国", "内蒙古"],
            axisLine: { show: false }, //坐标轴
            axisTick: [
              {
                //坐标轴小标记
                show: false,
              },
            ],
            axisLabel: {
              textStyle: {
                fontSize: "20",
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "bar",
            tooltip: { show: false },
            barMinHeight: 30, //最小柱高
            barWidth: 40, //柱宽度
            barMaxWidth: 100, //最大柱宽度
            data: datas, //[1, 23489, 29034, 104970, 0, 63030],
            itemStyle: {
              normal: {
                //柱状图颜色
                color: "#ff6600",
                label: {
                  show: true, //显示文本
                  formatter: "等级{b} : {c} 人",
                  position: "insideLeft",
                  //   position: "inside", //数据值位置
                  textStyle: {
                    color: "#000",
                    fontSize: "18",
                  },
                },
              },
            },
          },
        ],
      });
    },
    onSelectChange(opt) {
      this.selectValueBD = null;
      // console.log("select", opt);
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/statement/count",
        data: this.$qs.stringify({ index: opt }), //this.$qs.stringify
      }).then((response) => {
        // console.log(response.data.data[0]); //请求成功返回的数据
        let datas = [];
        let names = [];
        if (response.data.data[0] != null)
          response.data.data[0].forEach((e) => {
            datas.push(e.count);
            //['等级', '满意度', '信用度']
            names.push(e[opt=="等级"?"customer_grade":opt=="满意度"?"customer_satisfaction":"customer_credit_line"]);
          });
        this.initEcharts(
          "", //response.data.data[0][0].customer.customer_name,
          names,
          datas
        );
      });
    },
  },
};
</script>

<style></style>
